import React, {useEffect, useState} from 'react'
import {
    Input,
    Divider,
    Switch,
    Button,
    Drawer,
    message
} from 'antd'
import {
    CheckOutlined,
    CloseOutlined
} from '@ant-design/icons'
import axios from "axios";


import ThemeConfig from "./ThemeConfig";
import axiosConfig from "../../utils/axios.config";
import SelectSocialCard from "./SelectSocialCard";


import './index.css'
const {TextArea} = Input
export default function BlogConfig() {

    const [selectSocialDisabled,setSelectSocialDisabled] = useState(false)
    const [drawerShow,setDrawerShow] = useState(false);
    const [blogName,setBlogName] = useState('');
    const [blogGreet,setBlogGreet] = useState('');
    const [blogMessage,setBlogMessage] = useState('');
    const [socialCards,setSocialCards] = useState(new Array(3));
    const [visionConfig,setVisionConfig] = useState({})
    function updateSocialCard(index,socialCard){
        socialCards[index] = socialCard;
        setSocialCards([...socialCards])
    }

    function getBlogConfig(){
        axios({
            url:'/blogConfig/getConfig',
            baseURL:axiosConfig.baseURL,
            method:'GET'
        }).then(response=>{
            const {data} = response
            console.log(data)
            setBlogName(data.blogName)
            setBlogGreet(data.greet)
            setBlogMessage(data.message)
            // setProfilePicture(data.profilePicture)
            setVisionConfig({
                themeColors:data.themeColors,
                backgroundImg:data.backgroundImg,
                profilePicture:data.profilePicture
            })
            setSocialCards(data.socialCard)
        })
    }


    function updateBlogConfig(){

        const key = 'updateBlogConfig'
        if(blogGreet.trim()===''||blogName.trim()===''){
            message.warn({content:'必填项未填',key})
            return
        }
        message.loading({content:'保存中',key})
        const data = {
            blogName,
            greet:blogGreet,
            message:blogMessage,
            profilePicture:visionConfig.profilePicture,
            themeColors:visionConfig.themeColors,
            backgroundImg:visionConfig.backgroundImg,
            socialCard:selectSocialDisabled?[]:socialCards
        }
        console.log(data)
        axios({
            url:'/blogConfig/updateConfig',
            baseURL:axiosConfig.baseURL,
            method:'POST',
            data
        }).then(response=>{
            const code = response.data.code
            if(code==1){
                message.success({content:'保存成功',key})
            }else {
                message.success({content:'保存失败:服务器错误',key})
            }
        }).catch(err=>{
            message.warn({content:'保存失败:本地错误',key})
        })
    }

    function saveConfig(){
        updateBlogConfig()
    }

    useEffect(()=>{
        getBlogConfig()
    },[])
  return (
    <div className="blogConfig-box">
      <header className="blogConfig-header">
          <h3>博客端配置</h3>
          <Button style={{position:'absolute',right:'100px'}} type={"primary"} onClick={saveConfig} >保存</Button>
      </header>
        <main className="blogConfig-main">
            <div className="blogConfig-basic-config">
                <div className="blogConfig-basic-config-input">
                    <div>
                        <span><i style={{color:'red'}}>*</i>博客名称</span>
                        <Input style={{flexGrow:1}}
                               onChange={(e)=>{setBlogName(e.target.value)}}
                               showCount
                               maxLength={30}
                               value={blogName}
                        />
                    </div>
                    <Divider/>
                    <div>
                        <span><i style={{color:'red'}}>*</i>网站问候语</span>
                        <Input style={{flexGrow:1}}
                               onChange={(e)=>{setBlogGreet(e.target.value)}}
                               showCount
                               maxLength={100}
                               value={blogGreet}
                        />

                    </div>
                    <Divider/>
                    <div>
                        <span style={{alignSelf:'start'}}>网站留言</span>
                        <TextArea style={{flexGrow:1,height:'120px'}}
                                  onChange={(e)=>{setBlogMessage(e.target.value)}}
                                  showCount
                                  maxLength={300}
                                  value={blogMessage}
                        />
                    </div>
                    <Divider/>
                    <div><span>博客主题</span><Button onClick={()=>{setDrawerShow(true)}} style={{width:'100%'}} type={"primary"} size={"large"}>点击配置</Button></div>
                </div>
                <div className="blogConfig-basic-config-profilePicture">
                    <div className="blogConfig-set-profilePicture">
                        <div className="set-profilePicture">
                            <div className="cover-card" onClick={()=>{setDrawerShow(true)}}>
                                <span>点击修改头像</span>
                            </div>
                            <img src={visionConfig.profilePicture}  alt=""/>
                        </div>
                        <p>头像</p>
                    </div>
                    <div className="blogConfig-set-socialCard"  >
                        <div>
                            <span>站点展示</span>&nbsp;&nbsp;
                            <Switch
                                defaultChecked
                                checkedChildren={<CheckOutlined />}
                                unCheckedChildren={<CloseOutlined />}
                                onChange={()=>{
                                    setSelectSocialDisabled(!selectSocialDisabled)
                                }}
                            />
                            <br/>
                            <br/>
                        </div>
                        {
                            socialCards.map((item,index)=>{
                                return (
                                    <SelectSocialCard
                                        index={index}
                                        initial={item}
                                        key={index}
                                        update={updateSocialCard}
                                        disabled={selectSocialDisabled}
                                    />
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        </main>
        <Drawer title='视觉配置' placement={"top"} onClose={()=>{setDrawerShow(false)}} visible={drawerShow} >
            <ThemeConfig
                setVision = {setVisionConfig}
                initial = {visionConfig}
            />
        </Drawer>
    </div>
  )
}
